<template>
  <div class="add-boxs1">
    <t-dialog header="展品录入" :visible="props.visible" :on-close="close">
      <template #body>
        <div class="froms-box">
          <div class="froms-box-content">
            <t-form
              labelAlign="right"
              ref="form"
              labelWidth="120px"
              :data="formData"
              :rules="rules"
              @submit="onSubmit"
              v-show="fromType == 1"
            >
              <t-card class="dashboard-detail-card" id="froms-box-id-1213">
                <t-row :gutter="16">
                  <t-col :span="4">
                    <t-form-item label="展品名称" name="name">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">展品名称</span>
                          <span class="from-title-box-tip">*</span>
                        </div>
                        <t-input
                          show-limit-number
                          :maxlength="60"
                          v-model="formData.name"
                          placeholder="请输入展品名称"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="展品级别" name="levelId">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">展品级别</span>
                        </div>
                        <t-select v-model="formData.levelId">
                          <t-option v-for="item in datas.select1" :key="item.id" :label="item.text" :value="item.id" />
                        </t-select>
                        <!-- <div class="radio-parent">
                        <t-radio-group v-model="formData.levelId">
                          <t-radio
                            :style="{ marginLeft: index !== 0 ? '18px' : '0px' }"
                            :value="item.id"
                            v-for="(item, index) in datas.select1"
                            :key="item.id"
                            >{{ item.text }}</t-radio
                          >
                        </t-radio-group>
                      </div> -->
                      </div>
                    </t-form-item>
                  </t-col>
                  <!-- <t-col :span="6">
            <t-form-item label="开放状态" name="openStatus">
              <t-select v-model="formData.openStatus" :disabled="formData.id ? true : false">
                <t-option :key="1" label="公开" :value="1" />
                <t-option :key="2" label="私有" :value="2" />
              </t-select>
            </t-form-item>
          </t-col> -->
                  <t-col :span="4">
                    <t-form-item label="展品年代" name="ageId">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">年代</span>
                        </div>
                        <t-cascader
                          v-model="formData.ageId"
                          :options="datas.select4"
                          valueType="full"
                          :keys="{
                            value: 'id',
                            children: 'children',
                            label: 'text',
                          }"
                          clearable
                          @change="onChange"
                        />
                      </div>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4">
                    <t-form-item label="具体年代" name="concreteTimes">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">具体年代</span>
                        </div>
                        <t-input
                          show-limit-number
                          :maxlength="50"
                          v-model="formData.concreteTimes"
                          placeholder="如：公元前475年"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4">
                    <t-form-item label="展品尺寸" name="gender">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">尺寸</span>
                        </div>
                        <t-input
                          show-limit-number
                          :maxlength="60"
                          v-model="formData.size"
                          placeholder="请输入展品尺寸"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="展品类型" name="typeId">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">类型</span>
                        </div>
                        <t-select v-model="formData.typeId">
                          <t-option v-for="item in datas.select3" :key="item.id" :label="item.text" :value="item.id" />
                        </t-select>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="展品质地" name="texture">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">质地</span>
                        </div>
                        <t-input
                          show-limit-number
                          :maxlength="60"
                          v-model="formData.texture"
                          placeholder="请输入展品质地，如：玉石"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="展品来源" name="sourceId">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">来源</span>
                        </div>
                        <t-input
                          show-limit-number
                          v-model="formData.specificSources"
                          placeholder="请输入来源"
                          :maxlength="50"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="重量">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">重量</span>
                        </div>
                        <t-input
                          show-limit-number
                          v-model="formData.Weight"
                          placeholder="请输入展品重量"
                          :maxlength="50"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="展品来源">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">收藏单位</span>
                        </div>
                        <t-input
                          show-limit-number
                          :maxlength="60"
                          v-model="formData.location"
                          placeholder="请输入收藏单位"
                        ></t-input>
                        <!-- v-model="formData.concreteTimes" -->
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item label="3D链接" name="externalUrl">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">3D链接</span>
                        </div>
                        <t-input
                          show-limit-number
                          :maxlength="200"
                          v-model="formData.externalUrl"
                          placeholder="请输入3D链接"
                        ></t-input>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="12">
                    <t-form-item label="展品描述" name="gender">
                      <div class="hw-from-content">
                        <div class="from-title-box from-title-box-sb">
                          <span class="from-title-box-name">展品描述</span>
                          <t-loading
                            size="small"
                            v-if="store.AudioNextVersionType"
                            :loading="audioLoading && !audioVisible"
                            show-overlay
                          >
                            <div class="style-audio-add" @click="creatAi">
                              <i class="doorIcon"> &#xe652; </i>
                              <span> 生成语音 </span>
                            </div>
                          </t-loading>
                        </div>
                        <DydEditor v-model="formData.description" :Descriptions="formData.description"></DydEditor>
                        <div class="solider-editor"></div>
                      </div>
                    </t-form-item>
                  </t-col>

                  <t-col :span="12">
                    <t-form-item label="展品封面" name="coverUrl">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">展品封面</span>
                          <span class="from-title-box-tip">*</span>
                        </div>
                        <div style="display: flex">
                          <t-upload
                            v-if="!formData.coverUrl"
                            ref="uploadRef1"
                            v-model="filelist1"
                            accept=".jpg,.png,.webp"
                            :before-upload="beforeUpload"
                            :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                          >
                            <div class="img-list-box-upload">
                              <t-icon name="add" size="24px" style="color: rgba(0, 0, 0, 0.38)"></t-icon>
                              <span> 点击上传图片 </span>
                            </div>
                          </t-upload>
                          <div class="banner-img-box" v-else>
                            <div class="banner-img-box-heard">
                              <div></div>
                              <div class="banner-img-box-menu">
                                <div class="menu-item" @click="look(formData.coverUrl)">
                                  <i class="doorIcon">&#xe63b;</i>
                                </div>
                                <div class="menu-item" @click="formData.coverUrl = ''">
                                  <i class="doorIcon">&#xe634;</i>
                                </div>
                              </div>
                            </div>
                            <img
                              class="upload-boxs-item t-image t-image--fit-contain t-image--position-center"
                              :src="$filters.getLinkUrl(formData.coverUrl, '?imageView2/2/w/120/h/120/format/webp')"
                              alt=""
                            />
                          </div>
                          <div class="list-tip-box">
                            <span class="audio-tip">支持2M以内JPG、PNG、WEBP图片</span>
                          </div>
                        </div>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="12">
                    <t-form-item label="展品图片" name="images">
                      <div class="hw-from-content">
                        <div class="from-title-box">
                          <span class="from-title-box-name">展品图片</span>
                        </div>
                        <div class="img-list-box">
                          <div
                            class="banner-img-box banner-img-box-mg"
                            v-for="(item, index) in formData.images"
                            :key="index"
                          >
                            <div class="banner-img-box-heard">
                              <t-dropdown
                                :popupProps="{
                                  attach: '#froms-box-id-1213',
                                }"
                                trigger="click"
                                :maxColumnWidth="78"
                              >
                                <!-- :options="datas.select5" -->
                                <template #dropdown>
                                  <t-dropdown-menu v-model="item.type">
                                    <t-dropdown-item
                                      :class="{ 'dropdown-item-active': item.type == items.value }"
                                      @click="setcolStatus(items.value, index)"
                                      :value="items.value"
                                      v-for="items in datas.select5"
                                      :key="items.id"
                                    >
                                      {{ items.text }}
                                    </t-dropdown-item>
                                  </t-dropdown-menu>
                                </template>
                                <div class="banner-img-box-heard-left">
                                  <span v-if="item.type == 1">正视图</span>
                                  <span v-else-if="item.type == 2">俯视图</span>
                                  <span v-else-if="item.type == 3">侧视图</span>
                                  <span v-else-if="item.type == 4">全景图</span>
                                  <span v-else-if="item.type == 5">局部图</span>
                                  <span v-else-if="item.type == 6">底部图</span>
                                  <span v-else>未设置</span>
                                  <i class="doorIcon">&#xe63a;</i>
                                </div>
                              </t-dropdown>
                              <div class="banner-img-box-menu">
                                <div class="menu-item" @click="look(item.data)">
                                  <i class="doorIcon">&#xe63b;</i>
                                </div>
                                <div class="menu-item" @click="remove(index)">
                                  <i class="doorIcon">&#xe634;</i>
                                </div>
                              </div>
                            </div>
                            <img
                              class="upload-boxs-item t-image t-image--fit-contain t-image--position-center"
                              :src="$filters.getLinkUrl(item.data, '?imageView2/2/w/120/h/120/format/webp')"
                              alt=""
                            />
                          </div>
                          <t-upload
                            v-if="formData.images.length < 10"
                            ref="uploadRef1"
                            v-model="filelist1"
                            :max="10"
                            multiple
                            accept=".jpg,.png,.webp"
                            :auto-upload="true"
                            :before-upload="beforeUpload1"
                            :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                          >
                            <div class="img-list-box-upload">
                              <t-icon name="add" size="24px" style="color: rgba(0, 0, 0, 0.38)"></t-icon>
                              <span> 点击上传图片 </span>
                            </div>
                          </t-upload>
                          <div class="list-tip-box list-tip-box-mg">
                            <span class="audio-tip">支持2M以内JPG、PNG、WEBP图片 最多10张</span>
                          </div>
                        </div>
                      </div>
                    </t-form-item>
                  </t-col>
                  <t-col :span="12">
                    <t-col :span="12">
                      <t-form-item label="语音讲解">
                        <div class="hw-from-content">
                          <div class="from-title-box">
                            <span class="from-title-box-name">语音讲解</span>
                          </div>
                          <t-loading
                            size="small"
                            :loading="audioLoading && !audioVisible"
                            show-overlay
                            text="语音生成中..."
                          >
                            <div
                              class="audio-list-box-upload-parent"
                              @click="openaudioVisible"
                              v-if="!formData.audio.url"
                            >
                              <div class="audio-list-box-upload">
                                <i class="doorIcon"> &#xe652; </i>
                                <span> 添加音频 </span>
                              </div>
                            </div>

                            <HWplayer
                              :editType="true"
                              :audio="formData.audio"
                              v-else
                              @editAudioUrl="openaudioVisible"
                              @delAudioUrl="delAudioUrl"
                            />
                          </t-loading>
                          <span class="audio-tip">支持10M以内MP3格式音频，最多1条</span>
                        </div>
                      </t-form-item>
                    </t-col>
                  </t-col>
                </t-row>
              </t-card>
            </t-form>
          </div>

          <t-image-viewer v-model:visible="lookVisible" :images="[lookImg]"> </t-image-viewer>

          <div class="btn-boxs" v-if="fromType == 1">
            <t-button @click="blankRoute" variant="outline">返回</t-button>
            <t-button :loading="loading" @click="save">保存</t-button>

            <!-- <button class="hw-btn-style" style="margin-left: 12px">保存</button> -->
          </div>
        </div>
      </template>
    </t-dialog>
    <audioUploads
      ref="audioUploadRef"
      v-if="audioVisible"
      :maxLengh="5000"
      :refType="4"
      :unitInfo="formData"
      :info="formData.audio"
      :visible="audioVisible"
      @sbumitAudio="sbumitAudio"
      @emitTaskId="emitTaskId"
      @close="closeAudio"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { createdTSAudio, queryTSAudio } from '@/api/exhibit/exhibit';
import { useCounter } from '@/hooks/audioHooks';
import { cloneDeep } from 'lodash';
import audioUploads from '@/components/addExbition/addUnitAudioModel.vue';
import HWplayer from '@/components/audio/exbitionAudio.vue';
import { upLoadFn } from '@/utils/request/upload';
import { exhibitDirection, exhibitSave, exhibitInfo } from '@/api/exhibit/exhibit';
import { treeList } from '@/api/user/user';
import { useRouter, useRoute } from 'vue-router';
import internalPage from '@/components/Internalpage/index.vue';
import { url, heards, urls } from '@/utils/request/upload';
import { ref, reactive, computed, nextTick } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import DydEditor from '@/components/RichText/Editor.vue';
import { tabList2, tabList1, tabdatas, columns1, buttonText, pagescolumnsList } from './data';
import { split } from 'lodash';
import { number } from 'echarts/core';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const emit = defineEmits(['closeMdeol', 'addSuccess']);
const props = defineProps({
  visible: {
    type: Number,
  },
  id: {
    type: Number,
  },
});
const checked = ref<number>(0);
const chageTab = (e: number): void => {
  checked.value = e;
};
const { audioTimer, audioLoading, clearaudioTimer } = useCounter();
const audioUploadRef = ref(null);
const audioVisible = ref(false);
const Mp3Show = ref(false);
const editLock = ref(false);
const lookImg = ref('');
const lookVisible = ref(false);
const webUrls: string = '?imageView2/2/w/60/h/60/format/webp';
const visible = ref(false);
const pdChild = ref(false);
const buttonTextList = buttonText;
const form = ref(null);
const fromType = ref(1);
const filelist1 = ref([]);
const filelist2 = ref([]);
const formData = reactive({
  id: 0,
  name: null, //名称
  coverUrl: '', //封面
  ageId: [], //年代
  ageIds: null,
  levelId: null, //级别
  typeId: null, //类型
  sourceId: null, //来源
  concreteTimes: null, //具体年代
  size: '', //尺寸
  texture: null, //质地
  Weight: null,
  openStatus: 2, //开放状态
  specificSources: null, //来源
  images: [],
  description: '',
  location: null,
  externalUrl: null,
  audio: {
    type: 3,
    url: '',
    description: '',
    name: '',
    taskId: '',
    taskStatus: -2,
  }, //音乐链接
});
const loading = ref(false);
const columns = columns1;
const uploadAllFilesInOneRequest = ref(false);
const router = useRouter();
const route = useRoute();
const datas = reactive({
  tabs: tabList1,
  select1: [], //展品级别
  select2: [], //展品来源
  select3: [], //展品类型
  select4: [],
  select5: [], //方向
});
//语音模块函数
const openaudioVisible = () => {
  audioVisible.value = true;
};
const stripTagsWithRegex = (html) => {
  return html.replace(/<[^>]*>/g, '');
};
const creatAi = () => {
  //通过按钮传入单元描述

  audioVisible.value = true;
  nextTick(() => {
    setTimeout(() => {
      let str = stripTagsWithRegex(formData.description);
      audioUploadRef.value.setDescription(str);
    }, 100);
  });
};
const sbumitAudio = (parmass: any) => {
  //语音传入
  let arrInfo = cloneDeep(parmass);
  // console.log(arrInfo);

  formData.audio = arrInfo;

  audioVisible.value = false;
};
const emitTaskId = (parmass: any) => {
  //语音传入TaskId
  let arrInfo = cloneDeep(parmass);
  formData.audio = arrInfo;
  if (formData.audio.taskId && formData.audio.taskStatus === 0) {
    audioLoading.value = true;
    // PollingTime();
  } else {
    audioLoading.value = false;
  }
};
const closeAudio = () => {
  audioVisible.value = false;

  if (formData.audio.taskId && formData.audio.taskStatus === 0) {
    audioLoading.value = true;
    PollingTime();
  }
};
const PollingTime = () => {
  //音频生成轮询函数
  clearaudioTimer();
  audioLoading.value = true;
  audioTimer.value = setInterval(() => {
    queryTSAudio(formData.audio.taskId).then((res) => {
      // console.log(res.data);
      if (res.data) {
        formData.audio.taskId = res.data.taskId;
        formData.audio.taskStatus = res.data.taskStatus;
        if (res.data.taskStatus === 1) {
          MessagePlugin.success('生成成功');
          clearaudioTimer();
          formData.audio.url = res.data.url;
          formData.audio.name = res.data.name;
        }
        if (res.data.taskStatus === -1) {
          clearaudioTimer();
        }
      }
    });
  }, 2500);
};
//其他模块
const init = async () => {
  let { data } = await exhibitInfo(Number(props.id));
  formData.name = data.name;
  formData.coverUrl = data.coverUrl;
  formData.ageId = data.ageId; //data.ageId;
  let arrns = data.ageIds ? data.ageIds.split(',') : null;
  let arrns1 = [];
  if (arrns) {
    arrns.forEach((element) => {
      arrns1.push(Number(element));
    });
  }

  //formData.ageIds = data.ageIds ? data.ageIds.split(',') : null; //data.ageId;
  formData.ageId = arrns1; //data.ageId;
  formData.levelId = data.levelId;
  formData.typeId = data.typeId ? data.typeId : null;
  formData.sourceId = data.sourceId;
  formData.concreteTimes = data.concreteTimes;
  formData.size = data.size;
  formData.texture = data.texture;
  formData.Weight = data.weight;
  formData.location = data.location;
  formData.openStatus = data.openStatus;
  formData.images = data.images;
  formData.description = data.description;
  formData.externalUrl = data.externalUrl;
  formData.specificSources = data.specificSources;
  formData.audio = data.audio
    ? data.audio
    : {
        type: 3,
        url: '',
        description: '',
        name: '',
        taskId: '',
        taskStatus: -2,
      };
  formData.id = props.id ? props.id : 0;
  if (formData.audio.taskId && formData.audio.taskStatus === 0) {
    audioLoading.value = true;
    PollingTime();
  } else {
    audioLoading.value = false;
  }
  nextTick(() => {
    editLock.value = true;
  });
};
// console.log(route.query.id);

if (props.id) {
  init();
} else {
  editLock.value = true;
}

const pagescolumns = computed(() => {
  let num: any = checked.value;
  const columns = pagescolumnsList[num];
  return columns;
});

const onSubmit = async ({ validateResult, firstError, e }) => {
  e.preventDefault();
  if (validateResult === true) {
    formData.ageIds = '';
    let arrays = formData.ageId ? formData.ageId : [];
    var isArray = Array.isArray(arrays);
    if (isArray) {
      arrays.forEach((element) => {
        formData.ageIds = formData.ageIds + element + ',';
      });
    }
    formData.ageIds = formData.ageIds ? formData.ageIds.slice(0, formData.ageIds.length - 1) : '';
    formData.ageId = formData.ageId ? formData.ageId[formData.ageId.length - 1] : 0;
    loading.value = true;
    formData.ageId = formData.ageId ?? 0;
    formData.levelId = formData.levelId ?? 0;
    formData.typeId = formData.typeId ?? 0;
    formData.sourceId = formData.sourceId ?? 0;
    try {
      let res = await exhibitSave(formData);
      if (res.statusCode == 200) {
        onConfirmAnother(res.data);
        if (formData.id) {
          MessagePlugin.success('修改成功');
        } else {
          MessagePlugin.success('创建成功');
        }
      }
      loading.value = false;
    } catch {
      loading.value = false;
    }
  } else {
    MessagePlugin.warning(firstError);
  }
};
const blankRoute = () => {
  // '返回展品库'
  // router.go(-1);
  close();
};
const delAudioUrl = () => {
  formData.audio.url = '';
  formData.audio.name = '';
  formData.audio.description = '';
};
const rules = {
  name: [{ required: true, message: '展品名称必填', type: 'error' }],
  coverUrl: [{ required: true, message: '请添加封面', type: 'error' }],
  // ageId: [{ required: true, message: '请选择年代', type: 'error' }],
  // levelId: [{ required: true, message: '请选择级别', type: 'error' }],
  // typeId: [{ required: true, message: '请选择类型', type: 'error' }],
  images: [
    // { validator: (val) => val.length >= 1, message: '至少上传1张展品正面图片' },
    // { required: true, message: '请添加展品其他图片', type: 'error' },
  ],
  //   openStatus: [{ required: true, message: '请选择开放状态', type: 'error' }],
};
const getSelectList = async () => {
  let res = await treeList(371994471206981); //级别
  let res1 = await treeList(371996102197317); //来源
  let res2 = await treeList(371999507447877); //类型
  let res3 = await treeList(372051821408325); //年代
  let res4 = await exhibitDirection(); //方向
  datas.select1 = res.data;
  datas.select2 = res1.data;
  datas.select3 = res2.data;
  datas.select4 = res3.data;
  datas.select5 = res4.data;
};
const look = (e: string) => {
  //查看图片
  lookImg.value = urls + e;
  lookVisible.value = true;
};
const onSuccess2 = (e) => {
  // console.log(formData.coverUrl);
};
const beforeUpload = (file: any) => {
  //回调钩子
  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  upLoadFn(file, 4).then((res) => {
    // console.log(res);
    if (res) {
      formData.coverUrl = res;
    } else {
      MessagePlugin.error('创建成功');
    }
  });
};
const beforeUploadAudio = (file: any) => {
  // console.log(file);
  if (file.type.indexOf('audio/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 10) {
    MessagePlugin.error('上传大小超出10M限制');
    return;
  }
  Mp3Show.value = true;
  upLoadFn(file, 4).then((res) => {
    if (res) {
      formData.audio.url = res;
      formData.audio.name = file.raw.name;
    } else {
      MessagePlugin.error('上传失败');
    }
    Mp3Show.value = false;
  });
};
const beforeUpload1 = (file: any) => {
  //回调钩子
  // console.log(file);
  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  upLoadFn(file, 4).then((res) => {
    // console.log(res);
    if (res) {
      let obj = {
        data: res,
        type: 0,
        size: file.size,
        status: '上传完成',
        operation: null,
      };
      formData.images.push(obj);
    } else {
      MessagePlugin.error('上传失败');
    }
  });
};
getSelectList();
const handleFail = (e) => {};

const onSuccess3 = (e) => {};
const submit = () => {
  visible.value = false;
};
const onChange = (e) => {
  console.log(e);
};
const close = () => {
  //   visible.value = false;
  emit('closeMdeol');
};
const onConfirmAnother = (e: number) => {
  //弹框取消
  console.log(e, '1111111111111111');
  if (props.id !== 0) {
    emit('addSuccess', e, 2);
  } else {
    emit('addSuccess', e);
  }
};

const setcolStatus = (index, rowIndex) => {
  formData.images[rowIndex].type = index;
};
const remove = (e: number) => {
  formData.images.splice(e, 1);
};
const save = () => {
  form.value.submit();
};
</script>

<style lang="less" scoped>
:deep(.t-card__body) {
  height: 100%;
}
:deep(.t-dialog__body) {
  padding: 0 40px;
}
:deep(.t-dialog__footer) {
  display: none;
}
.froms-box {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 60vh;
}
.froms-box-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}
.froms-box-content::-webkit-scrollbar {
  //   display: none;
}
.heards-box {
  width: 100%;
  height: 66px;
  padding: 0 20px;
  background: #fefefe;
  border-radius: @radius-hw-box1;
  border: 1px solid #e62b17;
  div {
    height: 64px;
  }
}
.t-button--variant-outline {
  border-color: var(--td-border-level-2-color);
}
.t-button__text {
  color: #fff;
}
.t-tabs {
  height: 100%;
}
.dashboard-detail-card {
}
.t-col {
  margin-bottom: 24px;
  margin-top: 0px;
}
.t-row {
  margin-top: 0px;
}
.upload-boxs {
  width: 120px;
  height: 120px;
  .upload-boxs-item {
    width: 120px;
    height: 120px;
    border-radius: 6px;
  }
}
.upload-card-top {
  display: flex;
  align-items: center;
  img {
    width: 112px;
    height: 32px;
  }
  span {
    margin-left: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    line-height: 20px;
  }
}
.pages-box {
  margin-top: 20px;
}
.right-box {
  padding: 24px;
  border-radius: @radius-hw-box1;
  border: 1px solid #e62b17;
  background: #fff;
  height: 100%;
}
.btn-boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
  :deep(.t-button--theme-primary) {
    width: 68px;
    height: 40px;
    border-radius: 4px;
    margin-left: 12px;
  }
  :deep(.t-button--theme-default) {
    width: 68px;
    height: 40px;
  }
}

.t-dialog {
  min-width: 600px !important;
}
.operation-box {
  display: flex;
  align-items: center;

  width: 100%;
  span {
    font-size: 16px;
    font-weight: 400;
    color: rgba(210, 173, 119, 0.9);
    line-height: 22px;
    margin-right: 12px;
  }
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
}
.pop-item:hover {
  background: #f5f5f5;
  color: #e62b17;
}
.img-box {
  width: 60px;
  height: 60px;
}
.select-boxs {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 4px;
  span {
    margin-right: 4px;
    color: #e62b17;
  }
}
.select-boxs-null {
}
:deep(.t-table__content) {
  border-bottom: 1px solid #e7e7e7;
  // border-bottom: none;
}
.t-row {
  margin: 0;
}
:deep(.t-card__body) {
  padding: 0px;
}
:deep(.t-table) {
  border: 1px solid #e7e7e7;
  border-bottom: none;
}
:deep(.t-image) {
  // background: #999;

  background: #fafafa;
}
:deep(.t-card__header) {
  display: none;
}
:deep(.t-card--bordered) {
  border: none;
}
.img-list-box {
  display: flex;
  flex-wrap: wrap;
}
.img-list-box-upload {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 184px;
  background: #fafafa;
  border-radius: 4px;
  border: 1px dashed #ebe4e3;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
  }
}
.img-list-box-upload:hover {
  border: 1px dashed #e62b17;
}
.banner-img-box {
  position: relative;
  width: 184px;
  height: 184px;
  background: #fafafa;
  border-radius: 4px;
  border: 1px dashed #ebe4e3;
  .upload-boxs-item {
    width: 182px;
    height: 182px;
  }
}
.banner-img-box-heard {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 66;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.banner-img-box-menu {
  display: flex;

  z-index: 66;
  .menu-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    // background: #ffffff;
    // box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
    //   0px 2px 4px -1px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    // border: 1px solid #f0f0f0;
    margin-right: 8px;
    margin-top: 8px;
    .doorIcon {
      font-size: 16px;
      line-height: 16px;
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .menu-item:hover {
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
      0px 2px 4px -1px rgba(0, 0, 0, 0.12);
    border: 1px solid #f0f0f0;

    background: #ffffff;
    span {
      color: rgba(0, 0, 0, 0.59);
    }
    .doorIcon {
      color: rgba(0, 0, 0, 0.59);
    }
  }
}
.banner-img-box-mg {
  margin-right: 16px;
  margin-bottom: 16px;
}
.banner-img-box-heard-left {
  cursor: pointer;
  margin-left: 6px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78px;
  height: 24px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.3);

  border-radius: 4px;
  //
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 22px;
  }
  .doorIcon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
  }
}
.banner-img-box-heard-left:hover {
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
    0px 2px 4px -1px rgba(0, 0, 0, 0.12);
  border: 1px solid #f0f0f0;

  background: #ffffff;
  span {
    color: rgba(0, 0, 0, 0.59);
  }
  .doorIcon {
    color: rgba(0, 0, 0, 0.59);
  }
}
.solider-editor {
  width: 100%;
  height: 32px;
  // box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  margin-bottom: 8px;
}
.audio-list-box-upload-parent {
  width: 124px;
  height: 36px;
}
.audio-list-box-upload {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 124px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  .doorIcon {
    color: #e62b17;
    font-size: 16px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 8px;
  }
}
.audio-tip {
  display: flex;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-top: 8px;
}
.list-tip-box {
  display: flex;
  align-items: flex-end;
  width: 184px;
  // height: 184px;
  margin-left: 8px;
}
.list-tip-box-mg {
}
:deep(.t-radio) {
  margin-right: 0px;
}
//
:deep(.tox-tinymce) {
  height: 160px !important;
}
:deep(.tox .tox-statusbar) {
  display: none;
}
.radio-parent {
  display: flex;
  align-items: center;
  // justify-content: center;
  height: 36px;
}
:deep(.t-dialog__header) {
  box-shadow: none;
}

.add-boxs1 {
  :deep(.t-dialog__footer) {
    display: none;
  }
}
#froms-box-id-1213 {
  :deep(.t-dropdown) {
    width: 78px !important;
    background: #fff !important;
    padding: 4px 0px !important;
  }
  :deep(.t-popup__content) {
    border: none;
  }
  :deep(.t-dropdown__menu) {
    padding: 4px 0px !important;
  }
  :deep(.t-dropdown__item-text) {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 22px;
  }
  :deep(.dropdown-item-active) {
    background: rgba(255, 236, 230, 1) !important;
    .t-dropdown__item-text {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(230, 43, 23, 1) !important;
      line-height: 22px;
    }
  }
}
.from-title-box-sb {
  justify-content: space-between;
}
.style-audio-add {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 108px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  i {
    font-size: 18px;
    color: #e62b17;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 4px;
  }
}
</style>
